<script setup lang="ts">
import GridiconsAlignImageLeft  from '../components/icons/GridiconsAlignImageLeft.vue'
</script>
<template>
  <div class="h-screen">
    <div class="h-16 bg-amber-500">头部导航栏</div>
    
    <div class="flex h-[calc(100vh-4rem)]">
        <!-- 侧边栏 -->
        <div class="w-50 bg-amber-200 h-20">
            <div class="h-7 bg-green-400 flex justify-center items-center cursor-pointer">
                <GridiconsAlignImageLeft />
            </div>
        </div>
        <!-- 主内容区 -->
        <div class="flex flex-col h-full">
            <div class="h-7 flex items-center">多标签导航</div>
            <div class="bg-gray-200 w-[calc(100vw-12.5rem)] content-scrollable overflow-auto flex-1">
                <NuxtPage />
            </div>
        </div>

    </div>
  </div>
</template>

<style>
</style>